import React, { Component } from "react";
import { Table, Select } from "antd";
import { accountCate } from "../../config/enums";
const { Option } = Select;

export default class Order extends Component {
  state = { selectState: 0, selectPhone: null, orders: [], isLoading: false };
  onSearchPhone = (e) => {
    this.setState({
      selectPhone: e,
    });
    this.getOrders();
  };
  onChangeState = (e) => {
    console.log(e);
    this.setState({
      selectState: Number(e),
    });
    this.getOrders(e);
  };
  getOrders = async (e) => {
    this.setState({
      isLoading: true,
    });
    const res = await this.http("Order", {
      OrderState: e !== undefined ? Number(e) : this.state.selectState,
      Phone: this.state.selectPhone,
    });
    this.setState({
      isLoading: false,
      orders: res.data.dtos.map((i) => {
        i.machineName = i.order_MacineSizeDtos[0]
          ? i.order_MacineSizeDtos[0].machineName
          : "无";
        i.isFreeze = i.order_MacineSizeDtos[0]
          ? i.order_MacineSizeDtos[0].isFreeze
          : false;
        i.payPath =
          i.payRecords.length > 0
            ? accountCate[i.payRecords[i.payRecords.length - 1].accountCate]
            : "其他";
        return i;
      }),
    });
  };
  componentDidMount() {
    this.getOrders();
  }
  columns = [
    {
      title: "订单时间",
      dataIndex: "time",
      render: (e) => <div>{this.$dayjs(e).format("YYYY-MM-DD HH:mm:ss")}</div>,
    },
    {
      title: "矿机型号",
      dataIndex: "machineName",
    },
    {
      title: "订单价格",
      dataIndex: "amount",
    },
    {
      title: "支付方式",
      dataIndex: "payPath",
    },
    {
      title: "用户手机号",
      dataIndex: "phone",
    },
    {
      title: "订单状态",
      dataIndex: "orderState",
      render: (e) => (
        <div>
          {e === 3
            ? "待审核"
            : e === 4
            ? "建设中"
            : e === 5
            ? "已完成"
            : e === 6
            ? "已驳回"
            : "异常"}
        </div>
      ),
    },
    {
      title: "矿机状态",
      dataIndex: "isFreeze",
      render: (e) => <div>{e === true ? "被冻结" : "正常"}</div>,
    },
    // {
    //   title: "操作",
    //   dataIndex: "",
    //   key: "x",
    //   render: (e) => (
    //     <Space size="middle">
    //       <a onClick={() => this.addPrice(e)}>增加付款方式</a>
    //       <a onClick={() => this.editFormClick(e)}>编辑</a>
    //       <a onClick={() => this.handleDelete(e)}>删除</a>
    //     </Space>
    //   ),
    // },
  ];
  render() {
    return (
      <div>
        <div className="header" style={{ margin: "20px" }}>
          <Select
            style={{ width: 200, marginRight: "20px" }}
            placeholder="选择订单状态"
            onChange={this.onChangeState}
          >
            <Option value="0">全部</Option>
            <Option value="3">未审核</Option>
            <Option value="4">建设中</Option>
            <Option value="5">已完成</Option>
            <Option value="6">被驳回</Option>
          </Select>
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="按用户手机号查找"
            optionFilterProp="children"
            onSearch={this.onSearchPhone}
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          ></Select>
        </div>
        <Table
          loading={this.state.isLoading}
          rowKey={(data) => data.id}
          columns={this.columns}
          dataSource={this.state.orders}
        />
      </div>
    );
  }
}
